<template>
  <view class="news-page">
    <!-- 顶部标签栏 -->
    <view class="tabs-section">
      <view class="tabs-container">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab-item"
          :class="{ 'tab-active': activeTab === index }"
          @tap="switchTab(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view 
      class="content-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      @refresherrefresh="onRefresh"
      :refresher-triggered="refreshing"
    >
      <view class="news-list">
        <view 
          v-for="(item, index) in newsList" 
          :key="index"
          class="news-card fade-in"
          @tap="goToDetail(item)"
        >
          <view class="news-image">
            <image :src="item.image" mode="aspectFill" class="news-img"></image>
            <view v-if="item.tag" class="news-tag">{{ item.tag }}</view>
          </view>
          
          <view class="news-content">
            <view class="news-title">{{ item.title }}</view>
            <view class="news-desc">{{ item.description }}</view>
            <view class="news-meta">
              <text class="news-time">{{ item.time }}</text>
              <text class="news-views">{{ item.views }}次浏览</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="loading">
        <view class="loading"></view>
        <text class="load-text">加载中...</text>
      </view>
      
      <view class="no-more" v-if="noMore">
        <text class="no-more-text">没有更多内容了</text>
      </view>
    </scroll-view>
  </view>
  <!-- 自定义底部导航栏 -->
  <custom-tab-bar ref="tabBar" />
</template>

<script setup>
import CustomTabBar from '@/custom-tab-bar/index.vue'
import { ref, onMounted } from 'vue'

const activeTab = ref(0)
const refreshing = ref(false)
const loading = ref(false)
const noMore = ref(false)

const tabs = ref([
  { name: '全部', type: 'all' },
  { name: '环保百科', type: 'knowledge' },
  { name: '环保动态', type: 'news' }
])

const newsList = ref([
  {
    id: 1,
    title: '让我们一起回收咖啡包装！',
    description: '多层复合材料咖啡包装的回收处理方法和环保意义',
    image: '/static/images/coffee-recycle.jpg',
    tag: '环保行动',
    time: '2小时前',
    views: 1234,
    type: 'news'
  },
  {
    id: 2,
    title: '哪些物品是无需清洗的',
    description: '加入袋子派，让环保变得简单！了解哪些回收物品无需预处理',
    image: '/static/images/no-wash-items.jpg',
    tag: '回收指南',
    time: '5小时前',
    views: 856,
    type: 'knowledge'
  },
  {
    id: 3,
    title: '什么原因导致某些垃圾无法回收？',
    description: '深入了解垃圾分类中的常见问题：过小尺寸、污染、复合材料等',
    image: '/static/images/waste-problems.jpg',
    tag: '科普知识',
    time: '1天前',
    views: 2341,
    type: 'knowledge'
  },
  {
    id: 4,
    title: '难以回收？电子废弃物处理指南',
    description: '橡胶、电子废弃物等特殊材料的正确回收处理方式',
    image: '/static/images/electronic-waste.jpg',
    tag: '专业指导',
    time: '2天前',
    views: 1567,
    type: 'knowledge'
  }
])

onMounted(() => {
  // 设置自定义tabbar选中状态
  if (typeof getApp().globalData.setTabBarIndex === 'function') {
    getApp().globalData.setTabBarIndex(1)
  }
})

const switchTab = (index) => {
  activeTab.value = index
  // 这里可以根据不同标签加载不同内容
  filterNewsByTab(index)
}

const filterNewsByTab = (tabIndex) => {
  // 模拟根据标签筛选内容
  if (tabIndex === 0) {
    // 显示全部
    return
  } else if (tabIndex === 1) {
    // 环保百科
    return
  } else if (tabIndex === 2) {
    // 环保动态
    return
  }
}

const onRefresh = () => {
  refreshing.value = true
  
  // 模拟刷新数据
  setTimeout(() => {
    refreshing.value = false
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    })
  }, 1500)
}

const loadMore = () => {
  if (loading.value || noMore.value) return
  
  loading.value = true
  
  // 模拟加载更多数据
  setTimeout(() => {
    loading.value = false
    noMore.value = true
  }, 1500)
}

const goToDetail = (item) => {
  uni.showToast({
    title: `查看：${item.title}`,
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.news-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 140rpx;
}

.tabs-section {
  background: white;
  padding: 0 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.tabs-container {
  display: flex;
  align-items: center;
  height: 88rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
  position: relative;
  transition: all 0.3s ease;
}

.tab-active {
  color: #8BC34A;
  font-weight: 600;
}

.tab-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background: #8BC34A;
  border-radius: 3rpx;
}

.content-scroll {
  height: calc(100vh - 88rpx - 140rpx);
}

.news-list {
  padding: 24rpx 32rpx;
}

.news-card {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.news-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.news-image {
  position: relative;
  height: 320rpx;
  overflow: hidden;
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-tag {
  position: absolute;
  top: 16rpx;
  left: 16rpx;
  background: rgba(139, 195, 74, 0.9);
  color: white;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 24rpx;
  backdrop-filter: blur(10rpx);
}

.news-content {
  padding: 24rpx;
}

.news-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.news-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-time {
  font-size: 22rpx;
  color: #999;
}

.news-views {
  font-size: 22rpx;
  color: #999;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.load-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 16rpx;
}

.no-more {
  text-align: center;
  padding: 40rpx;
}

.no-more-text {
  font-size: 24rpx;
  color: #ccc;
}
</style>